<template>
  <div class="chart-box"  style="width: 100%; height: 400px">
    <div :id="chartId"  style="width: 100%; height: 400px"></div>
    <div class="year-list" v-if="type === 'F0701'">
      <ul>
        <li
          :class="{ active: item === activeYear }"
          v-for="item in years"
          :key="item"
          @click="changeYear(item)"
        >
          <a href="javascript:;">{{ item }}</a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
import "../../../../public/js/china";
import service from "@/service/projects";

export default {
  name: "chart1",
  components: {
    //someComponent
  },
  props: [
    "chartId",
    "chartYjryData",
    "chartLwData",
    "centerData",
    "lwxzList",
    "type",
  ],
  data() {
    return {
      msg: "Hello Vue.js",
      chartDiv: null,
      chartData: null,
      years: ["2020", "2019", "2018"],
      activeYear: "2020",
      myChart: null,
      datas: [
        { province: "北京", _count_id: 17 },
        { province: "湖北", _count_id: 17 },
        { province: "陕西", _count_id: 7 },
        { province: "山东", _count_id: 6 },
        { province: "浙江", _count_id: 6 },
        { province: "广东", _count_id: 5 },
        { province: "江苏", _count_id: 4 },
        { province: "江西", _count_id: 4 },
        { province: "甘肃", _count_id: 3 },
        { province: "广西", _count_id: 3 },
      ],
    };
  },
  computed: {},
  watch: {
    type: function (newVal, oldVal) {
      if (newVal) {
        this.id = newVal === "F0701" ? "1060" : "1059";
        this.loadData();
      }
    },
  },
  mounted: function () {
    this.id = this.type === "F0701" ? "1060" : "1059";
    this.loadData();
  },
  methods: {
    loadData() {
      this.chartDiv = echarts.init(document.getElementById(this.chartId));
      this.chartDiv.showLoading({
        text: "数据正在加载...",
        textStyle: { fontSize: 30, color: "#444" },
        effectOption: { backgroundColor: "rgba(0, 0, 0, 0)" },
      });
      const year = this.activeYear;
      service
        .getDatas(
          {
            columns:
              this.type === "F0701"
                ? ["province", "count:id", "approval_year"]
                : ["province", "count:id"],
            group: ["province"],
            order: [["count:id", 1]],
            filter: this.type === "F0701" ? [["approval_year", 0, year]] : [],
          },
          this.id
        )
        .then((res) => {
          let items = res.data;
          if (!items || !items.length) {
            items = this.datas;
          }
          this.chartData = items;
          this.initData();
          this.chartDiv.hideLoading();
        });
    },
    changeYear(item) {
      this.activeYear = item;
      this.loadData();
      // const data = this.chartData.map((item) => {
      //   return {
      //     name: item.province,
      //     value: item._count_id,
      //   };
      // });
      // this.myChart.setOption(this.getOptions(data));
    },
    initData() {
      const data = this.chartData.map((item) => {
        return {
          name: item.province,
          value: item._count_id,
        };
      });
      this.initChart(data);
    },
    initChart(data) {
      "use strict";
      this.chartDiv = echarts.init(document.getElementById(this.chartId));
      this.chartDiv.setOption(this.getOptions(data));
      window.addEventListener("resize",()=>{
        this.chartDiv.resize();
      });
    },
    getOptions(data) {
      const yData = [];
      const barData = [];
      const is2019 = this.activeYear === "2019";

      const year = this.activeYear;

      for (let i = 0; i < data.length; i++) {
        barData.push(data[i]);
        yData.push(i + data[i].name);
      }

      return {
        title: [
          {
            show: true,
            text: `${this.activeYear}年基金项目地理分布`,
            textStyle: {
              color: "#999",
              fontSize: 15,
            },
            left:'center',
            top:20
          },
        ],
        tooltip: {
          show: true,
          formatter(params) {
            if (!params.data || !params.data.value) return
            return params.name + "：" + (params.data ? params.data.value : 0);
          },
        },
        visualMap: {
          type: "continuous",
          orient: "horizontal",
          itemWidth: 10,
          itemHeight: 80,
          text: ["高", "低"],
          showLabel: true,
          seriesIndex: [0],
          min: 0,
          max: 4,
          inRange: {
            color: is2019
              ? ["#ebf3fc", "#c6ddf7", "#5b9ce9", "#3385e3"]
              : this.activeYear == 2020
              ? ["#FCF0DE", "#FACB89", "#F7B95F", "#FAAA39"]
              : ["#E8FCF5", "#9DF2D1", "#52D6A2", "#1BC481"],
          },
          textStyle: {
            color: "#7B93A7",
          },
          bottom: 30,
          left: "left",
        },
        grid: {
          right: 10,
          top: 200,
          bottom: 0,
          width: "15%",
        },
        xAxis: {
          show: false,
        },
        yAxis: {
          type: "category",
          inverse: true,
          nameGap: 16,
          axisLine: {
            show: false,
            lineStyle: {
              color: "#ddd",
            },
          },
          axisTick: {
            show: false,
            lineStyle: {
              color: "#ddd",
            },
          },
          axisLabel: {
            interval: 0,
            margin: 75,
            textStyle: {
              color: "#455A74",
              align: "left",
              fontSize: 14,
            },
            rich: {
              a: {
                color: "#fff",
                backgroundColor:
                  {
                    2018: "#1BC481",
                    2019: "#3385e3",
                    2020: "#FAAA39",
                  }[year] || "#FAAA39",
                width: 30,
                height: 20,
                align: "center",
                borderRadius: 2,
              },
              b: {
                color: "#333",
                backgroundColor:
                  {
                    2018: "#E8FCF5",
                    2019: "#ebf3fc",
                    2020: "#FCF0DE",
                  }[year] || "#4197FD",
                width: 30,
                height: 20,
                align: "center",
                borderRadius: 2,
              },
            },
            formatter(params) {
              if (parseInt(params.slice(0, 1)) < 3) {
                return [
                  "{a|" +
                    (parseInt(params.slice(0, 1)) + 1) +
                    "}" +
                    "  " +
                    params.slice(1),
                ].join("\n");
              }
              return [
                "{b|" +
                  (parseInt(params.slice(0, 1)) + 1) +
                  "}" +
                  "  " +
                  params.slice(1),
              ].join("\n");
            },
          },
          data: yData,
        },
        geo: {
          // roam: true,
          map: "china",
          left: "120",
          right: "200",
          zoom: 3,
          roam: false, // 是否允许缩放
          // layoutSize: '80%',
          label: {
            emphasis: {
              show: false,
            },
          },
          itemStyle: {
            normal: {
              color: "rgba(227,229,231,0.5)", // 地图背景色
              borderColor: "rgba(255,255,255,1)", // 省市边界线00fcff 516a89
              borderWidth: 1,
            },
            emphasis: {
              color: "rgba(37, 43, 61, .5)", // 悬浮背景
            },
          },
        },
        series: [
          {
            name: "mapSer",
            type: "map",
            roam: false,
            geoIndex: 0,
            label: {
              show: false,
            },
            data,
          },
          {
            name: "barSer",
            type: "bar",
            roam: false,
            visualMap: false,
            zlevel: 2,
            // barMaxWidth: 25,
            // barGap: 0,
            itemStyle: {
              normal: {
                color(params) {
                  // build a color map as your need.
                  const colorList = [
                    {
                      colorStops: [
                        {
                          offset: 0,
                          color:
                            {
                              2018: "",
                              2019: "",
                              2020: "",
                            }[year] || "#FFD119", // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color:
                            {
                              2018: "",
                              2019: "",
                              2020: "",
                            }[year] || "#FFAC4C", // 100% 处的颜色
                        },
                      ],
                    },
                    {
                      colorStops: [
                        {
                          offset: 0,
                          color:
                            {
                              2018: "#9DF2D1",
                              2019: "#c6ddf7",
                              2020: "#FACB89",
                            }[year] || "#00C0FA", // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color:
                            {
                              2018: "#1BC481",
                              2019: "#3385e3",
                              2020: "#FAAA39",
                            }[year] || "#2F95FA", // 100% 处的颜色
                        },
                      ],
                    },
                  ];
                  // if (params.dataIndex < 3) {
                  //   return colorList[0];
                  // }
                  return colorList[1];
                },
                // barBorderRadius: 15,
              },
            },
            data: barData,
          },
        ],
      };
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.chart-box {
  position: relative;
  height: 400px;
}
.year-list {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  ul {
    li {
      &.active {
        a {
          background: var(--single-color);
          color: #fff !important;
        }
      }
      a {
        display: block;
        padding: 0 5px;
        height: 25px;
        line-height: 25px;
        color: #333 !important;
        font-size: 12px;
        border: 1px solid #eee;
        border-radius: 5px;
        margin-bottom: 5px;
      }
    }
  }
}
</style>
